<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            text-align: center;
        }
    </style>

</head>
<body>
<h1>航班查询</h1>
日期：<input type="text" id="airdate">城市：从<input type="text" id="city1"> 到 <input type="text" id="city2"> <button id="button1">搜索</button>
<table border="1px">
    <thead></thead>
    <tbody>
    <tr >
        <td style="width: 200px;">航空公司/航班机型</td>
        <td style="width: 150px;">起降时间</td>
        <td style="width: 150px;">机场</td>
        <td style="width: 150px;">飞行时间</td>
        <td style="width: 150px;">经停</td>
        <td style="width: 150px;">参考报价</td>
    </tr>
    </tbody>


</table>



<script src="static/js/jquery-1.12.4.min.js"></script>
<!--<script type="text/javascript">-->
<!--    var city1id;-->
<!--    var city2id;-->
<!--    $("#button1").click(function () {-->

<!--        $.get("air/getID",{"city_name":$("#city1").val()},function (id) {-->
<!--            city1id=id;-->
<!--        })-->

<!--        $.get("air/getID",{"city_name":$("#city2").val()},function (id) {-->
<!--            city2id=id;-->
<!--        })-->

<!--        $('table').find('tr:not(:first)').remove();-->

<!--        $.get("Fli/find",{"flight_date":$("#airdate").val(),-->
<!--                            "take_airport_id":city1id,-->
<!--                            "landing_airport_id":city2id},function (airlist) {-->
<!--            airlist.forEach(item => {-->
<!--                const newRow = $('<tr></tr>');-->
<!--                newRow.append(`<td>${item.airline}/${item.type}</td>`);-->
<!--                newRow.append(`<td>${item.take_time}-${item.landing_time}</td>`);-->
<!--                newRow.append(`<td>${$("#city1").val()}<br>${$("#city2").val()}</td>`);-->
<!--                newRow.append(`<td>${item.flight_time}</td>`);-->
<!--                newRow.append(`<td>${item.stop_airport}</td>`);-->
<!--                newRow.append(`<td>￥${item.reference_price}</td>`);-->
<!--                $('table').append(newRow);-->
<!--            });-->
<!--        })-->
<!--    })-->

<!--</script>-->
<!--使用了async/await确保异步请求按指定顺序执行-->
<script>
    function getID(cityName) {
        return new Promise((resolve, reject) => {
            $.get("air/getID", { "city_name": cityName }, function (id) {
                resolve(id);
            }).fail(reject);
        });
    }
    async function findFlights() {
        const city1Value = $("#city1").val();
        const city2Value = $("#city2").val();
        const airDateValue = $("#airdate").val();

        $('table').find('tr:not(:first)').remove();

        const city1idPromise = getID(city1Value);
        const city2idPromise = getID(city2Value);

        const city1id = await city1idPromise;
        const city2id = await city2idPromise;

        const response = await $.get("Fli/find", {
            "flight_date": airDateValue,
            "take_airport_id": city1id,
            "landing_airport_id": city2id
        });
        //forEach:循环执行
        response.forEach(item => {
            const itemId = item.id;
            const newRow = $('<tr></tr>');
            newRow.append(`<td>${item.airline}/${item.type}</td>`);
            newRow.append(`<td>${item.take_time}-${item.landing_time}</td>`);
            newRow.append(`<td>${city1Value}<br>${city2Value}</td>`);
            newRow.append(`<td>${item.flight_time}</td>`);
            newRow.append(`<td>${item.stop_airport}</td>`);
            newRow.append(`<td>￥${item.reference_price}<br><button class="detailButton" data-id="${itemId}" >查询机票</button></td>`);
            $('table').append(newRow);
        });
    }
    $("#button1").click(findFlights);

    $('table').on('click', '.detailButton', function () {
        const parentRow = $(this).closest('tr');
        const itemId = $(this).data('id');
        let addedRows = [];
        $.get("ticket/getT", {
            "flight_id": itemId
        }, function (Tickedlist) {
            Tickedlist.forEach(item => {
                const newRowToAdd = $('<tr></tr>');
                newRowToAdd.append(`<td>${item.sell_company} </td>`);
                newRowToAdd.append(`<td>${item.ticket_price} </td>`);
                parentRow.after(newRowToAdd);
                addedRows.push(newRowToAdd);
            });
        });
        // 再次点击按钮删除添加的数据
        $(this).on('click',function () {
            addedRows.forEach(row => row.remove());
            addedRows = [];
        });
        
    });

    // const parentRow = $(this).closest('tr');
    // const itemId = $(this).data('id');
    // $.get("ticket/getT", {
    //     "flight_id": itemId},function (Tickedlist) {
    //     const newRowToAdd = $('<tr></tr>');
    //     Tickedlist.forEach(item => {
    //         newRowToAdd.append(`<td>${item.sell_company} </td>`);
    //         newRowToAdd.append(`<td>${item.ticket_price} </td>`);
    //     });
    //     parentRow.after(newRowToAdd);
    //位置差别，效果不同，上面是所有数据一行一行的输出
    // });

</script>
</body>
</html>